<template>
    <div class="system-manage">
        <h2>首页</h2>
        <input type="text" :value="test" @input="test = $event.target.value">
        {{ test }}

        <custom-input :value="test2" @input="test2 = $event"></custom-input>
        <custom-input v-model="test2"></custom-input>
        {{ test2 }}

        <base-checkbox v-model="lovingVue"></base-checkbox> {{lovingVue}}

        <navigation-link url="/profile">
            <template v-slot:header>
                <h1>具名插槽 name header</h1>
            </template> 
            your Profile 
        </navigation-link>

        作用域插槽：
        <current-user  >
            <!-- fitstName: 看不见我 -->
            <template v-slot="slotProps">
                {{ slotProps.row.firstName}}
            </template>
        </current-user>
        <br>
        独占默认插槽的缩写语法：row 重命名为 user
        <current-user  v-slot="{ row:user }">
            {{ user.firstName}}
        </current-user>
    </div>
</template>

<script>
import baseCheckbox from '../demo/BaseCheckbox';
import CurrentUser from '../demo/CurrentUser';

//v-model
var customInput = {
    props: [ 'value' ],
    template: `<input  :value="value" @input="$emit('input',$event.target.value)">`
};
//插槽
var navigationLink = {
    props: ['url'],
    template: `<a
    :href="url">
        <slot name="header"></slot>
        <slot>没有内容过来的时候显示</slot>
        <div>
            <slot name="foot"> foot没有内容</slot>
        </div>
    </a>`
};


export default {
    
    components: { 
        customInput, 
        baseCheckbox,
        navigationLink,
        CurrentUser,
        
    },

    data() {
        return {
            a: '',
            test: 'aaa',
            test2: '222',
            lovingVue: false,
            
        };
    },

    created() {
        // sdApi.test({aaa:1, bbb:2}).then();
    },



};
</script>